<script setup lang="ts">
import type { ArticleItem, ArticleResData } from '@/types/data'
import axios from 'axios'
import { ref, watch } from 'vue'

const props = defineProps<{
  channelID: number
}>()

const list = ref<ArticleItem[]>([])

// 观察数据改变，执行自定义的逻辑
watch(
  () => props.channelID,
  async () => {
    // console.log('频道 id 改变啦~')
    // http://geek.itheima.net/v1_0/articles?channel_id=10&timestamp=1727167970160
    // channel_id 频道 id
    // timestamp 时间戳 Date.now()
    const res = await axios.get<ArticleResData>('http://geek.itheima.net/v1_0/articles', {
      params: {
        channel_id: props.channelID,
        timestamp: Date.now()
      }
    })

    // console.log(res.data.data.results)
    list.value = res.data.data.results
  },
  {
    immediate: true // 立刻执行
  }
)
</script>

<template>
  <div class="article-list">
    <div class="article-item" v-for="item in list" :key="item.art_id">
      <p class="title">{{ item.title }}</p>
      <img
        v-if="item.cover.type > 0"
        v-for="it in item.cover.images"
        class="img"
        :src="it"
        alt=""
      />
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ item.pubdate }}</span>
      </div>
    </div>
  </div>
</template>
